<template>
  <div class="scroll">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(i, index) in bannerList" :key="index"
        ><img :src="i.bannerUrl"
      /></swiper-slide>
    </swiper>
    <!--以下看需要添加-->
    <!-- <div class="swiper-scrollbar"></div> -->
    <div class="swiper-pagin-box">
      <div class="swiper-pagination center"></div>
    </div>
  </div>
</template>
 
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  name: "vswiper",
  components: {
    swiper,
    swiperSlide,
  },
  props: {
    bannerList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      swiperOption: {
        pagination: ".swiper-pagination",
        // 轮播图的点
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        pagination: ".swiper-pagination",
        autoplayDisableOnInteraction: true,
        //循环
        loop: true,
        //每张播放时长3秒，自动播放
        autoplay: {
          delay: 1000,
          disableOnInteraction: false,
        },
        navigation: {
          nextEl: ".swiper-button-next", //前进按钮的css选择器或HTML元素。
          prevEl: ".swiper-button-prev", //后退按钮的css选择器或HTML元素。
          hideOnClick: true, //点击slide时显示/隐藏按钮
          disabledClass: "my-button-disabled", //前进后退按钮不可用时的类名。
          hiddenClass: "my-button-hidden", //按钮隐藏时的Class
        },
        //滑动速度
        speed: 10000,
        paginationClickable: true,
        nextButton: ".swiper-button-next",
        prevtButton: ".swiper-button-prev",
        // delay:1000
      },
    };
  },
  mounted() {
    //可以使用swiper这个对象去使用swiper官网中的那些方法
    // console.log("this is current swiper instance object", this.swiper);
    // this.swiper.slideTo(0, 0, false);
  },
};
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='less'>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.scroll {
  position: relative;
}
.swiper-slide {
  /* height: 580px; */
}
.swiper-pagination {
}
/deep/.swiper-pagin-box {
  display: flex;
  justify-content: center;
  /* border:1px red solid; */
  align-items: center;
  width: 100%;
  height: 40px;
  position: absolute;
  left: 0;
  bottom: 0;
}
/deep/.swiper-pagination-bullet {
  margin: 0 5px;
}
/deep/ .swiper-pagination-bullet-active {
  background: #fff;
}
</style>